<template>
  <div style="width: 80%; margin: 10px auto;background-color: rgba(245,245,245)">
    <el-card class="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单中心</el-breadcrumb-item>
        <el-breadcrumb-item>订单：{{ orderNumber }}</el-breadcrumb-item>
        <el-breadcrumb-item>物流信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card class="main"
             style="margin: 20px">
      <div class="clearfix body">
        <div class="left">
          <div class="main-left">
            <div class="information">
              <div class="clearfix">
                <el-image style="float: left; margin-left: 30px"
                          :src="src">123</el-image>
                <ul>
                  <li>送货方式：{{ tranMethod }}</li>
                  <li>货运单号: {{ oddNumber }}</li>
                </ul>
              </div>

              <el-card style="width: 200px; margin: 20px auto">
                <h2>收货人信息</h2>
                <p>收货人： 卓林欣</p>
                <p>地址： xxxx</p>
                <p>手机号码： 130****9327</p>
              </el-card>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="main-right">
            <el-timeline>
              <el-timeline-item v-for="(item, index) in logisticProgress"
                                :key="index"
                                :icon="item.icon"
                                :type="item.type"
                                :color="item.color"
                                :size="item.size"
                                :timestamp="item.timestamp">
                <el-card>
                  <h4>{{ item.status }}</h4>
                  <p>{{ item.information }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
const logisticProgress = [
  {
    status: '已签收',
    timestamp: '2018-04-12 20:46',
    information:
      '您的订单已签收，如有疑问您可以联系配送员【xxx，18815833186】确认。欢迎再次光临',
    size: 'large',
    type: 'primary',
    icon: 'el-icon-more',
  },
  {
    status: '派送中',
    timestamp: '2018-04-03 20:46',
    information:
      '您的订单在京东【中山大学大学城加盟京东派】上架完成，请上门自提',
    size: 'large',
    type: 'primary',
    icon: 'el-icon-more',
  },
  {
    status: '运输中',
    timestamp: '2018-04-03 20:46',
    information:
      '您的订单在京东【中山大学大学城加盟京东派】上架完成，请上门自提',
    size: 'large',
    type: 'primary',
    icon: 'el-icon-more',
  },
  {
    status: '仓库处理中',
    timestamp: '2018-04-03 20:46',
    information:
      '您的订单在京东【中山大学大学城加盟京东派】上架完成，请上门自提',
    size: 'large',
    type: 'primary',
    icon: 'el-icon-more',
  },
  {
    status: '已下单',
    timestamp: '2018-04-03 20:46',
    information:
      '您的订单在京东【中山大学大学城加盟京东派】上架完成，请上门自提',
    size: 'large',
    type: 'primary',
    icon: 'el-icon-more',
  },
]
export default {
  data() {
    return {
      orderNumber: '2141241214',
      src: require('assets/image/onePlus.png'),
      tranMethod: '京东快递',
      oddNumber: 'JDV1246718274',
      logisticProgress,
    }
  },
  created() {
    this.orderNumber = this.$route.query.orderNumber
  },
  mounted() {},
}
</script>

<style lang="less" scoped>
.body {
  height: 1000px;
  position: relative;
  .left {
    position: absolute;
    width: 30%;
    height: 100%;
    border: 1px paleturquoise solid;
    .main-left {
      margin-top: 200px;

      .information {
        ul {
          float: right;
          list-style: none;
          font-size: 13px;
          margin-right: 30px;
          li {
            height: 25px;
            line-height: 25px;
          }
        }
      }
    }
  }
  .right {
    position: absolute;
    left: 30%;
    top: 0;
    height: 100%;
  }
}
</style>